/* eslint-disable no-undef */
import echarts from 'echarts';
import pic1 from './img/pic1.png';
import pic2 from './img/pic2.png';

let gradient = new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
  {
    offset: 0,
    color: '#0563B2'
  },
  {
    offset: 1,
    color: '#0092BF'
  },
]);

let gradient2 = new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
  {
    offset: 0,
    color: '#B83F28'
  },
  {
    offset: 1,
    color: '#D67E3C'
  },
]);

let lineStyle = 'rgba(255, 255, 255, 0.3)'
let textStyle = 'rgba(255, 255, 255, 1)'


function getPictorialBar(dt) {
  let maxValue = Math.max(...dt);
  return dt.map((v) => {
    let isMax = v === maxValue;
    return {
      value: v,
      symbol: 'image://' + (isMax ? pic2 : pic1), //triangle
    }
  });
}

function getBar(dt) {
  let maxValue = Math.max(...dt);
  return dt.map((v) => {
    let isMax = v === maxValue;
    return {
      value: v,
      itemStyle: {
        color: isMax ? gradient2 : gradient,
      }
    }
  });
}



function optionFromData(data) {

  let plusData = data.map(v => v + 1);

  let opt = {

    legend: {
      show: false
    },

    tooltip: {
      show: true,
      formatter(obj) {
        return obj.value.toFixed(2)
      }
    },

    xAxis: {
      data: range(1, data.length + 1),
      axisLine: {
        lineStyle: {
          color: lineStyle
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: lineStyle
        }
      },
      axisLabel: {
        color: textStyle,
      }
    },

    yAxis: {
      axisLine: {
        lineStyle: {
          color: lineStyle
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: lineStyle
        }
      },
      axisLabel: {

        color: textStyle,
   
        lineStyle: {
          color: lineStyle
        }
      }
    },

    series: [
      {
        name: 'a',
        type: 'bar',
        barWidth: 5,
        data: getBar(data),
        itemStyle: {
          color: gradient
        },
        zlevel: 0
      },
      {
        name: 'b',
        type: 'pictorialBar',
        barGap: '-100%',
        symbolPosition: 'end',
        symbolSize: 15,
        barCategoryGap: '-130',
        data: getPictorialBar(plusData),
        zlevel: 1
      },

    ]
  };

  return opt;
}




export default optionFromData;
